<!-- <template></template> -->
<script setup lang="ts">
import { onMounted, onBeforeUnmount, nextTick } from 'vue';
import { useViewer } from '@/stores/viewer';
let viewer: any; //场景视图
let viewerEx: any;

let constainer: any;
let mydiv: any;

onMounted(() => {
  async function initWork() {
    const configdata = viewer.zz.getConfig();
    delete configdata.navigation;
    delete configdata.location;

    //切换默认显示的底图
    for (let i = 0, len = configdata.basemaps.length; i < len; i++) {
      const item = configdata.basemaps[i];
      if (!item) continue;
      if (item.type == 'group' && item.layers == null) continue;

      if (!item.visible) {
        item.visible = true;
        break;
      }
    }

    //用于双屏同图层，不同配置展示
    for (let i = 0, len = configdata.operationallayers.length; i < len; i++) {
      const item = configdata.operationallayers[i];
      if (item && item.compare) {
        //存在compare属性时
        for (const key in item.compare) {
          item[key] = item.compare[key];
        }
      }
    }
    const opts = configdata;
    opts.homeButton = false;
    opts.geocoder = false;
    opts.sceneModePicker = false;
    opts.navigationHelpButton = false;
    opts.vrButton = false;
    opts.fullscreenButton = false;
    opts.baseLayerPicker = true;

    await zz3d.createMapEx('cesiumContainerEx', opts).then((v: any) => {
      viewerEx = v;
    });

    viewer.scene.morphComplete.addEventListener(function (_event: any) {
      //切换场景前事件
      if (viewer.scene.mode === Cesium.SceneMode.SCENE2D) {
        viewerEx.scene.screenSpaceCameraController.enableTilt = false;
      } else {
        viewerEx.scene.screenSpaceCameraController.enableTilt = true;
      }
    });

    viewer.camera.changed.addEventListener(_map_extentChangeHandler);
    viewer.camera.percentageChanged = 0.01;

    viewerEx.camera.changed.addEventListener(_mapEx_extentChangeHandler);
    viewerEx.camera.percentageChanged = 0.01;

    _map_extentChangeHandler();
  }
  function _map_extentChangeHandler() {
    viewerEx.camera.changed.removeEventListener(_mapEx_extentChangeHandler);
    updateView(viewer, viewerEx);
    viewerEx.camera.changed.addEventListener(_mapEx_extentChangeHandler);
  }
  function _mapEx_extentChangeHandler() {
    viewer.camera.changed.removeEventListener(_map_extentChangeHandler);
    updateView(viewerEx, viewer);
    viewer.camera.changed.addEventListener(_map_extentChangeHandler);
  }
  //“变化屏”viewerChange变化，将“被更新屏”viewerUpdate同步更新
  function updateView(viewerChange: any, viewerUpdate: any) {
    const point = zz3d.point.getCameraView(viewerChange);
    viewerUpdate.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(point.x, point.y, point.z),
      orientation: {
        heading: Cesium.Math.toRadians(point.heading),
        pitch: Cesium.Math.toRadians(point.pitch),
        roll: Cesium.Math.toRadians(point.roll)
      }
    });
  }

  viewer = useViewer().viewer;
  constainer = document.getElementById('allViewContainer');
  mydiv = document.createElement('div');
  mydiv.id = 'cesiumContainerEx';
  mydiv.style.width = '0';
  mydiv.style.height = '100%';
  mydiv.style.flex = '1';
  constainer.appendChild(mydiv);
  nextTick(() => initWork());
});

onBeforeUnmount(() => {
  viewerEx.destroy();
  constainer.removeChild(mydiv);
});
</script>
